<template>
  <div>
    <div class="up">
      <h1>任务列表</h1>
      <p>
        任务总数还有{{ obj.length }}:未完成 {{ sheng() }}
        <span v-on:click="del()">【完成】</span>
      </p>
      <ul>
        <li v-for="(v, i) in obj" :key="v.id">
          <input type="checkbox" v-model="v.ab" />
          <span v-on:click="change(i)" v-if="v.cd" :class="v.ab ? 'color' : ''">
            {{ v.text }}--{{ v.ab }}</span
          >
          <input type="text" v-model="v.text" v-on:blur="change(i)" v-else />
        </li>
      </ul>
      <input type="text" v-model="otext" /><button @click="add()">
        点击添加
      </button>

      <!-- <h1 v-show="bool"></h1>
    <h1 v-if="bool"></h1>
    <h1 v-else></h1>
    <input type="text" v-model="text" /><input type="checkbox" v-model="bool" /> -->
    </div>
    <div class="middle">
      <!-- v-model的修饰符 -->
      <p>失焦或点击后再修改text</p>
      <input type="text" v-model.lazy="text" />
      <h1>{{ text }}</h1>
      <p>判断input的数字的数据类型</p>
      <input type="text" v-model.number="otext" />
      <button v-on:click="fun()">点击查看数据类型</button>
      <h1>{{ otext }}</h1>
      <p>清除input的空格</p>
      <input type="text" v-model.trim="tex" />
      <h1>{{ tex }}</h1>
    </div>
    <!-- <div class="down">
      <el-select v-model="form.columeType" placeholder="字段类型">
        <el-option
          v-for="(item, index) in columeTypeArr"
          :key="index"
          :label="item.label"
          :value="item.value"
        >
        </el-option>
      </el-select>
    </div> -->
  </div>
</template>

<script>
export default {
  data() {
    return {
      text: "",
      otext: "",
      tex: "",
      obj: [
        { id: 12345, text: "商品1", ab: false, cd: true },
        { id: 23456, text: "商品2", ab: false, cd: true },
        { id: 34567, text: "商品3", ab: false, cd: true },
        { id: 45678, text: "商品4", ab: false, cd: true },
        { id: 56789, text: "商品5", ab: false, cd: true },
      ],
      //   columeTypeArr: [
      //     { value: "String", label: "字符串" },
      //     { value: "Int", label: "整数" },
      //     { value: "Decimal", label: "数值型" },
      //   ],
    };
  },
  methods: {
    fun() {
      console.log(typeof this.otext);
    },
    add() {
      this.obj.push({ id: parseInt(Math.random() * 60000), text: this.otext });
      this.otext = "";
    },
    change(i) {
      console.log("hahah");
      this.obj[i].cd = !this.obj[i].cd;
    },
    sheng() {
      let num = 0;
      for (let i = 0; i < this.obj.length; i++) {
        if (this.obj[i].ab == false) {
          num += 1;
        }
      }
      return num;
    },
    del() {
      //     let newobj=[];
      //     newobj=this.obj;
      //     this.obj=[];
      //    for(let i=0 ;i<newobj.length;i++){
      //     if(newobj[i].ab==false){
      //         this.obj.push(newobj[i])

      //     }
      //    }
      let newobj = [];
      for (let i = 0; i < this.obj.length; i++) {
        if (this.obj[i].ab == false) {
          newobj.push(this.obj[i]);
        }
      }
    },
  },
};
</script>

<style scoped>
h1 {
  width: 53.333vw;
  height: 10.667vw;
  background-color: pink;
}
</style>